<!-- 一个小商品列表  只做一个小商品的架构-->
<template>
  <div id="gooditem" @click="itemclick">
       <img :src="showimg" @load="imgloaditem" />
       <div>
           <p>{{goodlistitem.title}}</p>
           <span class="price">{{goodlistitem.price}}☉</span>
           <span class="cfav">{{goodlistitem.cfav}}</span>
       </div>
         <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:"goodslistitem",
    props: {
       goodlistitem:{
            type:Object,
            default(){
                 return {}
            }
       }
    },
    methods: {
         imgloaditem(){
             this.$bus.$emit("imgloaditem")
         },
         itemclick(){
              //点击图片实现路由跳转
                     this.$router.push("/detail/"+this.goodlistitem.iid)
          }
    },
    computed: {
         showimg(){
               return  this.goodlistitem.image || this.goodlistitem.show.img 
         }
    }
    
}

</script>
<style  scoped>
#gooditem{
       width: 48%;
       font-size: 10px;
}
img{
     width: 100%;
}
#gooditem span{
       text-align: center;
}
.price{
    display: inline-block;
    margin-left: 35%;
    color: red;
}
 
</style>